<template>
  <div>
    <div class="head-top">
      <mt-header title="图书">
        <mt-button icon="back" slot="left" @click='back'></mt-button>
        <mt-button slot="right">
          <img src="../../../../../static/book/book08.png" @click="toggle1()" alt="" width="30px" height="30px" v-if="CollectNo.whetherCollection == 0" />
          <img src="../../../../../static/book/book09.png" @click="toggle2()" alt="" width="30px" height="30px" v-else />
        </mt-button>
        <mt-button slot="right" @click="showFX()">
          <img src="../../../../../static/book/book01.png" alt="" width="30px" height="30px" />
        </mt-button>
      </mt-header>
    </div>

    <div class="main">
      <div class="book-details">
        <div class="imgs">
          <img :src="bookContent.cover" width="90px" height="128px" />
        </div>
        <div class="info">
          <p v-html="bookContent.bookName">南方有乔木(同名电视剧由谢江峰、范冰冰主演)</p>
          <p>{{bookContent.author}}</p>
          <p>{{bookContent.publishingOrgName}}</p>
          <!--<p>123万人阅读</p>-->
        </div>
      </div>

      <div class="headline">
        <span>内容简介：</span>
        <span v-html="bookContent.bookIntroduction"></span><br />
        <p class="author_jiajie">作者简介：</p>
        <p>版权</p>
        <p>出版社：{{bookContent.publishingOrgName}}</p>
        <p>ISBN：{{bookContent.isbn}}</p>
      </div>
      <div class="book-tabbar">
        <span @click="openRead()">
          立即阅读
        </span>
        <span v-if='CollectNo.whetherBookShel == 0' @click="addbooks">放入书架</span>
        <span v-else @click="delShelf">移除书架</span>
      </div>
    </div>
    <Actionsheet :open="openActSheet" :action="actions" v-on:show="func($event)"></Actionsheet>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import baseurl from "../../../../api/baseurl.js";
import { Indicator } from "mint-ui";
import api from "./../../../../api/api.js";
import Actionsheet from "../../../../compkit/actionsheet";
export default {
  props: ["open"],
  components: { Actionsheet },
  data() {
    return {
      active: "",
      userid: "",
      bookContent: [],
      datevalue: "",
      bookId: "",
      isshow: true,
      CollectNo: [],
      openActSheet: false,
      actions: [
        {
          name: "书友圈",
          img: "static/friend.png",
          method: this.book
        }
      ]
    };
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.bookId = localStorage.getItem("bookId");
    this.userid = localStorage.getItem("userid");
    this.isCollect();
    this.getBook();
  },
  mounted() {},
  methods: {
    // 行为记录
    readRecord() {
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      const params = new URLSearchParams();
      params.append("title", this.bookContent.bookName);
      params.append("type", 1);
      params.append("userid", userid);
      params.append("fileid", this.bookContent.bookId);
      params.append("recorddate", "");
      params.append("describ", this.bookContent.bookIntroduction);
      params.append("imgurl", this.bookContent.cover);
      params.append("author", this.bookContent.author);
      params.append("edition", accid);
      this.$http({
        method: "post",
        url: baseurl.urls + "readrecord/addReadrecord",
        data: params
      })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询图书记录
    isCollect() {
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      console.log("bookid",this.bookId);
      this.$http({
        method: "post",
        url: baseurl.urls + "readrecord/selectBookMessage",
        params: {
          columnType: 1,
          type: 1,
          userid: userid,
          fileid: this.bookId,
          edition: accid
        }
      })
        .then(response => {
          this.CollectNo = response.data.date;
          console.log(this.CollectNo);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 打开图书地址
    openRead() {
      this.readRecord();
      if (this.bookContent.format[0] == "Epub") {
        this.$router.push({
          name: "reading",
          params: {
            bookurl: this.bookContent.filesPathList[0].fileResourcePath,
            title:this.bookContent.bookName
          }
        });
      } else if (this.bookContent.format[0] == "PDF") {
        this.$router.push({
          name: "readingPdf",
          params: {
            bookurl: this.bookContent.filesPathList[0].fileResourcePath,
            bookName: this.bookContent.bookName
          }
        });
      }
    },
    book() {
      this.$router.push({
        name: "addbooks",
        params: { bookinfo: this.bookContent, bookds: true, type: 1 }
      });
    },
    showFX() {
      this.openActSheet = !this.openActSheet;
    },
    toggle1() {
      this.addCollect();
      this.isCollect();
    },
    toggle2() {
      console.log(this.bookContent);
      this.delCollect();
      this.isCollect();
    },
    back() {
      this.$router.back();
    },
    getBook() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getBookInfo",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            userId: this.userid,
            bookId: this.bookId
          }
        }
      })
        .then(response => {
          this.bookContent = response.data.data;
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    },
    //添加收藏
    addCollect() {
      const userid = localStorage.getItem("userid");
      const params = new URLSearchParams();
      params.append("userid", userid);
      //收藏类型 例如：1 图书 2期刊 3 报纸 ...
      params.append("columntype", 1);
      //封面
      params.append("cover", this.bookContent.cover);
      //名称
      params.append("name", this.bookContent.bookName);
      //类型 1 图书 2 期刊  3 报纸  ....
      params.append("type", 1);
      //描述
      params.append("describe", this.bookContent.bookIntroduction);
      //播放数量
      params.append("playback", 10);
      //fileid 唯一值不能重复
      params.append("fileid", this.bookContent.bookId);
      this.$http({
        method: "post",
        url: baseurl.urls + "/collection/addCollection",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            Toast("收藏成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加到书架
    addbooks() {
      const userid = localStorage.getItem("userid");
      this.isshow = false;
      const params = new URLSearchParams();
      params.append("userid", userid);
      params.append("describe", this.bookContent.bookIntroduction);
      params.append("cover", this.bookContent.cover);
      params.append("title", this.bookContent.bookName);
      params.append("author", this.bookContent.author);
      //fileid 唯一值不能重复
      params.append("fileid", this.bookContent.bookId);
      this.$http({
        method: "post",
        url: baseurl.urls + "/bookshelf/addBookShelf",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            Toast("添加成功");
            this.isCollect();
            console.log(response);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //移除书架
    delShelf() {
      this.$http({
        method: "post",
        url: baseurl.urls + "/bookshelf/deleteBookShelf",
        params: {
          id: this.CollectNo.bookShelfId
        }
      })
        .then(response => {
          if (response.status == 200) {
            // this.getBook();
            Toast("移除成功");
            this.isCollect();

          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除收藏
    delCollect() {
      const userid = localStorage.getItem("userid");
      this.$http({
        method: "post",
        url: baseurl.urls + "/collection/deleteCollection",
        params: {
          id: this.CollectNo.collectionId
        }
      })
        .then(response => {
          if (response.status == 200) {
            Toast("删除成功");
            this.isCollect();
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.author_jiajie {
  line-height: 2.5rem;
}
.book-details {
  width: 100%;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  background: #ffffff;
  box-sizing: border-box;
}

.book-details .imgs {
  margin: 20px 0px 20px 15px;
  border-radius: 8px;
}

.info {
  margin-left: 25px;
  box-sizing: border-box;
}

.info p:nth-of-type(1) {
  margin-bottom: 14px;
  font-size: 18px;
  color: #252525;
}

.info p:nth-of-type(2) {
  margin-bottom: 14px;
  font-size: 13px;
  color: #a1a1a1;
}

.info p:nth-of-type(3) {
  font-size: 13px;
  color: #a1a1a1;
}

.headline {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  margin-top: 16px;
  padding: 10px 15px;
  font: 15px/22px "microsoft yahei";
}

.book-tabbar {
  width: 100%;
  height: 49px;
  display: flex;
  align-items: center;
  /*background: #e60012;*/
}

.book-tabbar span:last-child {
  width: 50%;
  height: 49px;
  line-height: 49px;
  color: #252525;
  text-align: center;
  background: #ffffff;
  font-size: 15px;
}

.book-tabbar span:first-child {
  width: 50%;
  height: 49px;
  line-height: 49px;
  color: #fff !important;
  text-align: center;
  background: #e60012;
  font-size: 15px;
}
.book-tabbar span:first-child > a {
  color: #fff !important;
}
.book-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>